<template>
	<div>
		<el-row style="margin-top: 15px;padding: 20px 0;">
			<el-col :span="24">
				<el-button type="primary" @click="goBack()">返回
				</el-button>
			</el-col>
		</el-row>
		<!-- banner下方快速入口 id=0 -->
		<div class="customer" v-if='id==0'>

			<div style="display: flex;">
				<div style="margin: 10px;">
					<div>01功能图标</div>
					<el-input style="width: 200px;height: 100px;margin-top: 20px;" v-model="bannername1">
					</el-input>
					<we-ui-uploads :images="bannerIcon1" :maxCount="1" :maxSize="1024*512" @uploading="uploading1"></we-ui-uploads>
					<el-button type="primary" style="margin-left: 25px;" @click="save_img(1)">保存</el-button>

				</div>
				<div style="margin: 10px;">
					<div>02功能图标</div>
					<el-input style="width: 200px;height: 100px;margin-top: 20px;" v-model="bannername2">
					</el-input>
					<we-ui-uploads :images="bannerIcon2" :maxCount="1" :maxSize="1024*512" @uploading="uploading2"></we-ui-uploads>
					<el-button type="primary" style="margin-left: 25px;" @click="save_img(2)">保存</el-button>
				</div>
				<div style="margin: 10px;">
					<div>03功能图标</div>
					<el-input style="width: 200px;height: 100px;margin-top: 20px;" v-model="bannername3">
					</el-input>
					 
					<we-ui-uploads :images="bannerIcon3"  :maxCount="1" :maxSize="1024*512" @uploading="uploading3"></we-ui-uploads>
					<div>
					 
					</div>
				
					<el-button type="primary" style="margin-left: 25px;" @click="save_img(3)">保存</el-button>
				</div>
				<div style="margin: 10px;">
					<div>04功能图标</div>
					<el-input style="width: 200px;height: 100px;margin-top: 20px;" v-model="bannername4">
					</el-input>
					<we-ui-uploads :images="bannerIcon4" :maxCount="1" :maxSize="1024*512" @uploading="uploading4"></we-ui-uploads>
					<el-button type="primary" style="margin-left: 25px;" @click="save_img(4)">保存</el-button>
				</div>
				<div style="margin: 10px;">
					<div>05功能图标</div>
					<el-input style="width: 200px;height: 100px;margin-top: 20px;" v-model="bannername5">
					</el-input>
					<we-ui-uploads :images="bannerIcon5" :maxCount="1" :maxSize="1024*512" @uploading="uploading5"></we-ui-uploads>
					<el-button type="primary" style="margin-left: 25px;" @click="save_img(5)">保存</el-button>
				</div>
			</div>
		</div>
		<!-- 新人限时专享 id=1 -->
		<div style="margin-left: 50px;" v-if='id==1'>
			<div class="flex" style="margin-top: 50px;">
				<div class="just" style="font-size: 20px;height: 60px;">板块名称</div>
				<el-input style="width: 450px;height: 60px;display: block;margin-left: 20px;line-height: 60px;" v-model="xinrenName"></el-input>
			</div>
			<div class="flex">
				<div class="just" style="font-size: 20px;">图片修改</div>
				<div style="margin: 10px;">
					</el-input>
					<we-ui-uploads :images="xinren_img" :maxCount="1" :maxSize="1024*512" @uploading="uploading6"></we-ui-uploads>
					<!-- <el-button type="success" @click="save_img(1)" style="width: 100px;">保存</el-button> -->

				</div>
				
			</div>
		<!-- 	<div class="flex">
				<div class="just" style="font-size: 20px; ">跳转链接</div>
				<div >
					
					<el-input style="width: 450px;height: 60px;display: block;margin-left: 20px;line-height: 60px;" v-model="xinrenurl"></el-input>
				</div>
			</div> -->
	 
			<el-button type="primary" @click="xinren_edit()" style="width: 100px;margin-top:30px;">保存</el-button>
		</div>
		<!-- 热销新品 id=2 -->
		<div style="margin-left: 50px;" v-if='id==2'>
			<div class="flex" style="margin-top: 50px;">
				<div class="just" style="font-size: 20px;height: 60px;">板块名称</div>
				<el-input style="width: 200px;height: 60px;display: block;margin-left: 20px;line-height: 60px;" v-model="rexiaoName"></el-input>
			</div>
		<!-- 	<div class="flex">
				<div class="just" style="font-size: 20px;height: 60px;">跳转类型</div>
				<div style="margin: 10px;">
					<div class="just" style="margin-left: 20px;font-weight: bold;display: flex;text-align: center;">链接</div>
				</div>
			</div> -->
			<div class="flex">
				<div class="just" style="font-size: 20px;height: 60px;">跳转链接</div>
				<div  	>

					<el-input style="width: 450px;height: 60px;display: block;margin-left: 20px;line-height: 60px;" v-model="rexiaourl"></el-input>
				</div>
			</div>
			<el-button type="primary" @click="rexiao_edit()" style=" margin-top: 30px;width: 100px;">保存</el-button>
		</div>

	</div>
</template>
<style>
</style>
<script>
	export default {
		data() {
			return {
				bannerIcon1: [],
				bannerIcon2: [],
				bannerIcon3: [],
				bannerIcon4: [],
				bannerIcon5: [],
				bannername1: '',
				bannername2: '',
				bannername3: '',
				bannername4: '',
				bannername5: '',
				img_arr: [],
				sysCode: '',
				sysValue: '',
				xinrenCode: '',
				xinren_img: [],
				xinrenName: '',
				rexiaoName: '',
				rexiaoCode: '',
				rexiaourl: '',
				tejiaurl:'',
				xinrenurl:'',
				tejiaName:'',
				tejiaName2:'',
				// 
				formInline: {
					goodName: '',
					goodOneCate: '',
					goodTwoCate: '',
					goodState: 2,
					storeId: '',
					pageNum: 1,
					pageSize: 5,
					sort: 'T1.CRE_TIME',
					desc: 'DESC',
					goodIsDiscount: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 1,
					count: 1,
					rows: []
				},
				pageInfo2: {
					pageNum: 1,
					pageSize: 5,
					count: 1,
					rows: []
				},
				dialogVisible: false,
				table_loading: false,
				form: {
					goodsCodeList: [],
					operationCode: 1
				},
				storeGoodDtos: [],
				dialogTableVisible: false,
				dialogTableVisible2: false,
				gridData: [],
				checked: [],
				checkAll: false,
				isIndeterminate: true,
				arr: [],

				URL: URL,
				loading: false,
				sortList: [],
				secondList: [],
				thirdList: [],
				f: {},
				flag2: false
			}
		},
		created() {
			this.id = this.$route.params.id
			if (this.id == '0') {
				this.images_list()
			} else if (this.id == '1') {
				this.form.operationCode=1
				this.xinren_list()
			} else if (this.id == '2') {
				this.form.operationCode=2
				this.rexiao_list()
			}

			this.fetchData()


		},
		watch: {
			'form.bannerType'(val, oldVal) {
				this.old = oldVal

			}
		},
		methods: {


			save_img(e) {
          var bannername='';
				if (e == 1) {
					this.sysCode = this.img_arr[0].sysCode
					this.sysValue = this.bannerIcon1.join('')
					bannername=this.bannername1
				} else if (e == 2) {
					this.sysCode = this.img_arr[1].sysCode
					this.sysValue = this.bannerIcon2.join('')
					bannername=this.bannername2
				} else if (e == 3) {
					this.sysCode = this.img_arr[2].sysCode
					this.sysValue = this.bannerIcon3.join('')
					bannername=this.bannername3
				} else if (e == 4) {
					this.sysCode = this.img_arr[3].sysCode
					this.sysValue = this.bannerIcon4.join('')
					bannername=this.bannername4
				} else if (e == 5) {
					this.sysCode = this.img_arr[4].sysCode
					this.sysValue = this.bannerIcon5.join('')
					bannername=this.bannername5
				}


				var data = {
					sysRemark: bannername,
					sysCode: this.sysCode,
					sysValue: this.sysValue
				}
				// console.log(this.bannerIcon3, 'data')
				this.dataApi.ajax('editSysParam', data, res => {
					if (res.responseType == 'S') {
						this.showMsg('保存成功')
					}
				});
			},
			uploading1(f) {
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);

					}
				});

			},
			uploading2(f) {
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);
					}
				});

			},
			uploading3(f) {
				console.log(f)
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);
					}
				});

			},
			uploading4(f) {
				console.log(f)
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);
					}
				});

			},
			uploading5(f) {
				console.log(f)
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);
					}
				});

			},
			uploading6(f) {
				console.log(f)
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath);
					}
				});

			},
			images_list() {
				// 获取5个图标

				// if (rid === 'add') return;
				this.dataApi.ajax('sysParamList', {}, res => {
					if (res.responseType === 'S') {
						this.img_arr = res.sysParams
						this.bannername1 = res.sysParams[0].sysRemark
						this.bannername2 = res.sysParams[1].sysRemark
						this.bannername3 = res.sysParams[2].sysRemark
						this.bannername4 = res.sysParams[3].sysRemark
						this.bannername5 = res.sysParams[4].sysRemark
						this.bannerIcon1.push(res.sysParams[0].sysValue)
						this.bannerIcon2.push(res.sysParams[1].sysValue)
						this.bannerIcon3.push(res.sysParams[2].sysValue)
						this.bannerIcon4.push(res.sysParams[3].sysValue)
						this.bannerIcon5.push(res.sysParams[4].sysValue)


					}
				});
			},
			xinren_list() {
				// 获取个人推荐
				var data = {
					operationCode: '6'
				}
				this.dataApi.ajax('singleOperationInfo', data, res => {
					if (res.responseType === 'S') {
						this.xinren_img = res.operationIcom.split(',')
						this.xinrenName = res.operationName
						this.xinrenCode = res.operationCode
						this.xinrenurl = res.operationImage

					}
				});
			},
			xinren_edit() {
				// 新品编辑保存
				var xinren_img = this.xinren_img.join('')
				
				var data = {
					sysCode: 'shangjiaruzhu',
					sysRemark: '商家入住运营位',
					sysValue: xinren_img,
				}
				this.dataApi.ajax('editSysParam', data, res => {
					if (res.responseType === 'S') {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}
				});

			},
			
			rexiao_list() {
				 
				var data = {
					operationCode: '2',
				}
				this.dataApi.ajax('singleOperationInfo', data, res => {
					if (res.responseType === 'S') {
						this.rexiaourl = res.operationImage
						this.rexiaoName = res.operationName
						this.rexiaoCode = res.operationCode
					}
				});
			},
			rexiao_edit() {
				// 热销编辑保存				 
				var data = {
					operationImage: this.rexiaourl,
					operationName: this.rexiaoName,
					operationCode: this.rexiaoCode
				}
				this.dataApi.ajax('operationEdit', data, res => {
					if (res.responseType === 'S') {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}
				});
			
			},
			tejia_list() {
				// 获取今日特价
				var data = {
					operationCode: this.form.operationCode
				}
				this.dataApi.ajax('singleOperationInfo', data, res => {
					if (res.responseType === 'S') {
						
							this.tejiaurl = res.operationImage
							this.tejiaName = res.operationName
							this.tejiaName2=res.operationSecName
					
						
						// this.rexiaoCode = res.operationCode
			
					}
				});
			},
			tejia_edit() {
				// 今日特价编辑保存				 
				var data = {
					operationImage: this.tejiaurl,
					operationName: this.tejiaName,
					operationSecName:this.tejiaName2,
					operationCode: this.form.operationCode
				}
				this.dataApi.ajax('operationEdit', data, res => {
					if (res.responseType === 'S') {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}
				});
			
			},
		 
			
			// -------------------------------添加商品---------------------------------------------------------
			fetchData() {
				this.dataApi.ajax('operationSelect', {
					operationCode: this.form.operationCode
				}, res => {
					if (res.responseType === 'S') {
						this.pageInfo2 = {
							pageNum: 1,
							pageSize: 5,
							count: 1,
							rows: []
						}
						for (var i = res.dtos.length - 1; i >= 0; i--) {
							res.dtos[i].sort_value = i + 1
							res.dtos[i].index = i
							res.dtos[i].OldProbability = i + 1
						}
						let arr = generateArr(res.dtos)
						this.storeGoodDtos = res.dtos
						this.pageInfo2.count = res.dtos.length
						this.pageInfo2.rows = arr.splice(0, 5)
					}
				});
			},
			// 2
			fetchGoods(page = 1) {
				this.checked = []
				this.pageInfo.pageNum = page;
				this.formInline.pageNum = page;
				this.dataApi.ajax('selectPageStoreGood', this.formInline, res => {
					if (res.responseType === 'S') {
						this.pageInfo = res
						this.gridData = res.dtos

						this.arr = []
						this.checked = []
						this.inisIndeterminate = true
						for (var i = this.gridData.length - 1; i >= 0; i--) {
							this.arr.push(this.gridData[i])
						}
						if (this.checked.length == this.arr.length) {
							this.checkAll = true
						} else {
							this.checkAll = false;
						}

					}
				});

			},
			fetchList() {
				this.dataApi.ajax('MallGoodClassifyControl/selectOneList', null, res => {
					if (res.responseType === 0) {
						this.sortList = res.goodsClassifyPojos
					}
				});
			},
			selectSort() {
				this.formInline.secondCode = ''
				this.formInline.thcondCode = ''
				this.dataApi.ajax('MallGoodClassifyControl/selectListOne', {
					classifyName: this.formInline.classifyCode
				}, res => {
					if (res.responseType === 0) {
						this.secondList = res.goodsClassifyPojos
					}
				});
			},
			selectSort2() {
				if (this.flag2 === true) this.formInline.thcondCode = ''
				this.flag2 = true;
				this.dataApi.ajax('MallGoodClassifyControl/selectListOne', {
					classifyName: this.formInline.secondCode
				}, res => {
					//console.log(res)
					if (res.responseType === 0) {
						this.thirdList = res.goodsClassifyPojos
					}
				});
			},
			onSubmit() {

				this.dialogTableVisible = false
				// this.pageInfo2.rows=this.checked
				for (var key in this.storeGoodDtos) {
					for (var i in this.checked) {
						if (this.storeGoodDtos[key].goodId.indexOf(this.checked[i].goodId) !== -1) {
							this.checked.splice([i], 1)
						}
					}
				}

				if (this.checked.length <= 0) {
					return false;
				}
				this.storeGoodDtos = this.storeGoodDtos.concat(this.checked)
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					this.storeGoodDtos[i].sort_value = i + 1
					this.storeGoodDtos[i].index = i
					this.storeGoodDtos[i].OldProbability = i + 1
				}
				var arr = generateArr(this.storeGoodDtos)
				this.pageInfo2.count = this.storeGoodDtos.length
				this.pageInfo2.rows = arr.splice(0, 5)

			},
			// 1
			submit() {
				let obj = generateObj(this.form)

				if (this.storeGoodDtos.length == 0) {
					this.$message({
						type: 'warning',
						message: '请选择至少一个商品!'
					});
					return;
				}
				var arr = []
				for (var i = 0; i < this.storeGoodDtos.length; i++) {
					arr[i] = this.storeGoodDtos[i].goodId
				}
				obj.goodsCodeList = arr.join(',')

				this.loading = true

				console.log(obj, 'ovbis')
				this.dataApi.ajax('operationEdit', obj, res => {
					//console.log(res)
					if (res.responseType === 'S') {
						this.showMsg('保存成功')
						this.loading = false;
						this.fetchData();

					}
				});


			},
			handleCurrentChange(val) {
				this.fetchGoods(val)
				this.checkAll = false
			},
			handleCurrentChange2(val) {
				this.pageInfo2.pageNum = val
				// console.log(arr.splice(5*(val-1),(5*(val-1)+5)))
				var arr2 = []
				var arr = generateArr(this.storeGoodDtos)
				arr2 = arr.slice(5 * (val - 1), (5 * (val - 1) + 5))
				this.pageInfo2.rows = arr2
			},
			handleCheckAllChange(event) {

				if (event.target.checked == false) {
					for (var i = this.arr.length - 1; i >= 0; i--) {
						for (var j = this.checked.length - 1; j >= 0; j--) {
							if (this.arr.indexOf(this.checked[j]) !== -1) {
								this.checked.splice(j, 1)
							}
						}
					}

				} else {
					this.isIndeterminate = false;
					for (var i = this.gridData.length - 1; i >= 0; i--) {
						if (this.checked.indexOf(this.arr[i]) === -1) {
							this.checked.push(this.arr[i])
						}
					}
				}


			},
			handleCheckedCitiesChange(value) {

				let arr = []
				for (var i = this.arr.length - 1; i >= 0; i--) {
					for (var j = this.checked.length - 1; j >= 0; j--) {
						if (arr.indexOf(this.checked[j]) === -1 && this.arr[i] === this.checked[j]) {
							arr.push(this.checked[j])
						}
					}
				}


				let checkedCount = arr.length;
				this.checkAll = checkedCount === this.arr.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.arr.length;
			},
			deleteRow(index, id) {
				this.pageInfo2.rows.splice(index, 1);
				// this.storeGoodDtos.splice(index, 1);
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					if (this.storeGoodDtos[i].goodId.indexOf(id) !== -1) {
						this.storeGoodDtos.splice([i], 1)
					}
				}
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					this.storeGoodDtos[i].sort_value = i + 1
					this.storeGoodDtos[i].index = i
					this.storeGoodDtos[i].OldProbability = i + 1
				}
				this.handleCurrentChange2(this.pageInfo2.pageNum)
				this.pageInfo2.count = this.storeGoodDtos.length
			},
			editOrder(item, e) {
				// console.log(item.index)

				// var arr_old=generateArr(this.storeGoodDtos)
				// this.storeGoodDtos=[]
				// this.storeGoodDtos=arr_old 
				// this.pageInfo2.rows=[]
				var val = e //输入的排序值
				if (!isFloat(e)) {
					this.showMsg('输入的排序值不正确', 'warning')
					return
				}
				// console.log(e.target.value,item.OldProbability)
				// return;
				if (Math.floor(val) <= 0) {
					val = item.OldProbability || 0;
					return false;
				}
				if (item.OldProbability == val) return false;
				if (val > this.storeGoodDtos.length) {
					this.showMsg('排序值不能大于总数', 'warning')
					item.sort_value = item.OldProbability
					return false;
				}
				//let currentList = this.pageInfo2.rows;

				let newVal = this.storeGoodDtos[item.index] //获取当前的元素值


				let oldVal = this.storeGoodDtos[val - 1] //获取要替换的元素值



				this.storeGoodDtos.splice(val - 1, 1, newVal) //替换旧值并新增的新值
				this.storeGoodDtos.splice(item.index, 1, oldVal) //替换新值并新增的旧值
				// console.log(this.storeGoodDtos,item.OldProbability-1,index-1)
				// console.log(item.OldProbability,val)//旧的排序值

				oldVal.index = item.index
				newVal.index = parseInt(val - 1)

				// oldVal.sort_value = oldVal.index+1+""
				// newVal.sort_value = newVal.index+1+""

				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {

					// this.$set(this.storeGoodDtos[i],'sort_value',this.storeGoodDtos[i].index+1+"")
					this.storeGoodDtos[i].sort_value = this.storeGoodDtos[i].index + 1 + ""

					//console.log(this.storeGoodDtos[i].sort_value);
				}

				this.handleCurrentChange2(this.pageInfo2.pageNum) //根据所有数据数组切割成当前页数组
				this.dialogTableVisible2 = false
			},
			setOldProbability(item, index) {
				item.OldProbability = index
			},
			fanhui() {
				history.back(-1)
			},
			uploading(f) {
				this.dataApi.upload('file/upload', f.file, res => {
					//console.log(res)
					if (res.responseType === 0) {
						f.images.splice(f.index, 1, this.URL + res.fileName)
					}
				});
			},
			showDilog(item) {
				this.dialogTableVisible2 = true
				this.f = item
			},
			// ----------------------------------------------------------------------------------------------


		}
	
	}
</script>
